import Https from "@/utils/Https";
import { CheckCard } from "@ant-design/pro-components";
import { Button, Card, Divider, Empty, Spin, message } from "antd";
import dayjs from "dayjs";
import { FC, useEffect, useState } from "react";
import styles from "../styles.less";
import AddReservation from "./addReservation"; //新增预约
import AppointedStudents from "./appointedStudents"; //已约学员
import default_avater from "@/assets/imgs/default_avater.png";
import default_avater_female from "@/assets/imgs/default_avater_female.png";
import sexFemale from "@/assets/imgs/sexFemale.png";
import sexMale from "@/assets/imgs/sexMale.png";
const DateReservation: FC<any> = (props) => {
  const { venueObj, defaultDate } = props;
  const [checkedIndex, setCheckedIndex] = useState(-1);
  const [open, setOpen] = useState("");
  const [cardList, setCardList] = useState([]);
  const [cardInfo, setCardInfo] = useState({});
  const [loading, setLoading] = useState(false);
  const [reload, setReload] = useState(false);
  const getDayRecords = async (venueId, startTime) => {
    let params = {
      venueId,
      startTime: dayjs(startTime).format("YYYY-MM-DD"),
    };
    setLoading(true);
    let res = await Https.get(
      "/course/sched/scheduleDayRecordList",
      params,
      true
    );
    setLoading(false);
    if (res.code == 200 && res.data) {
      setCardList(res.data);
    } else {
      message.error(res.msg);
    }
  };
  useEffect(() => {
    if (venueObj.id && defaultDate) {
      getDayRecords(venueObj.id, defaultDate);
    }
    setCheckedIndex(-1);
    setCardInfo({});
  }, [venueObj, defaultDate]);
  return !venueObj.id ? (
    <Empty
      image={Empty.PRESENTED_IMAGE_SIMPLE}
      description={
        <div>
          暂无数据 <br /> 请先选择场馆
        </div>
      }
    />
  ) : (
    <Spin spinning={loading}>
      {cardList.length > 0 ? (
        <div className={styles.dateCard}>
          {cardList.map((item, index) => (
            <CheckCard
              checked={checkedIndex == index}
              key={index}
              avatar={
                item.avatar
                  ? item.avatar
                  : item.sex == 0
                  ? default_avater
                  : default_avater_female
              }
              title={
                <div>
                  <span
                    style={{
                      display: "flex",
                      justifyContent: "flex-start",
                      alignItems: "center",
                    }}
                  >
                    {item.courseCoachName}
                    <img
                      style={{ marginLeft: "5px" }}
                      src={item.sex == 0 ? sexMale : sexFemale}
                      alt=""
                    />
                  </span>
                  <span>{item.phoneNumber}</span>
                </div>
              }
              description={
                <>
                  <Divider dashed />
                  <div className={styles.dateCardInfo}>
                    <div
                      className={styles.dateInfoName}
                      title={item.courseName}
                    >
                      {item.courseName}
                    </div>
                    <div className={styles.dateInfoOther}>
                      <span>
                        {dayjs(item.startTimeSlot).format("HH:mm")}~
                        {dayjs(item.endTimeSlot).format("HH:mm")}
                      </span>
                      <span>
                        {item.isExpired == 1
                          ? "已过期"
                          : item.isFull == 1
                          ? "已满员"
                          : "可预约"}
                      </span>
                    </div>
                    <div className={styles.dateInfoOther}>
                      <span>{item.classRoomName}</span>
                      <span>
                        <span className={styles.tips}>{item.signCount}</span>|
                        <span className={styles.tips}>{item.studentCount}</span>
                        |
                        <span className={styles.tips}>{item.peopleNumMax}</span>
                      </span>
                    </div>
                  </div>
                </>
              }
              extra={
                <Button
                  onClick={(e) => {
                    setCardInfo(item);
                    setOpen("add");
                  }}
                  disabled={item.isExpired == 1}
                  type="primary"
                >
                  预约
                </Button>
              }
              onClick={() => {
                setCheckedIndex(index);
                setCardInfo(item);
              }}
            />
          ))}
        </div>
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={<div>暂无团课排课信息</div>}
        />
      )}
      {cardList.length > 0 && (
        <Card title="已约学员信息" style={{ marginTop: "16px" }}>
          {!cardInfo.id ? (
            <Empty
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              description={<div>暂无预约学员信息，请选择预约列表数据查询</div>}
            />
          ) : (
            <AppointedStudents
              onSuccess={() => {
                getDayRecords(venueObj.id, defaultDate);
              }}
              reload={reload}
              cardInfo={cardInfo}
            />
          )}
        </Card>
      )}
      {/* 新增预约 */}
      <AddReservation
        open={open == "add"}
        courseInfo={cardInfo}
        defaultDate={defaultDate}
        onSuccess={() => {
          setOpen("");
          getDayRecords(venueObj.id, defaultDate);
          setReload(!reload);
        }}
        onClose={() => {
          setOpen("");
        }}
      />
    </Spin>
  );
};
export default DateReservation;
